<template>
  <div>
    <div class="top">
      <el-descriptions :column="4" :size="size">
        <el-descriptions-item label="订单编号">kooriookami</el-descriptions-item>
        <el-descriptions-item label="运单编号">18100000000</el-descriptions-item>
        <el-descriptions-item label="下单时间">18100000000</el-descriptions-item>
        <el-descriptions-item label="订单状态">18100000000</el-descriptions-item>
        <el-descriptions-item label="预计到达日期">18100000000</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="top">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item title="基本信息" :name="1">
          <div>
            <el-descriptions class="margin-top" title="发货方" :column="2" :size="size">
              <el-descriptions-item label="发货方姓名：">kooriookami</el-descriptions-item>
              <el-descriptions-item label="发货方电话">18100000000</el-descriptions-item>
              <el-descriptions-item label="发货方地址">苏州市</el-descriptions-item>
              <el-descriptions-item label="详细地址">宁沈阳皇姑</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <el-descriptions class="margin-top" title="收货方" :column="2" :size="size">
              <el-descriptions-item label="收货方姓名">kooriookami</el-descriptions-item>
              <el-descriptions-item label="收货方电话">18100000000</el-descriptions-item>
              <el-descriptions-item label="收货方地址">苏州市</el-descriptions-item>
              <el-descriptions-item label="详细地址">宁沈阳皇姑</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="1" :size="size">
              <el-descriptions-item label="距离">kooriookami</el-descriptions-item>
            </el-descriptions>
          </div>
          <div>
            <el-descriptions class="margin-top" :column="1" :size="size">
              <el-descriptions-item label="备注">暂无</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="top">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item title="取件信息" :name="2">
          <div>
            <el-descriptions class="margin-top" :column="4" :size="size">
              <el-descriptions-item label="所在网点">kooriookami</el-descriptions-item>
              <el-descriptions-item label="取件类型">18100000000</el-descriptions-item>
              <el-descriptions-item label="作业状态">苏州市</el-descriptions-item>
              <el-descriptions-item label="取件快递员">宁沈阳皇姑</el-descriptions-item>
              <el-descriptions-item label="快递员电话">18100000000</el-descriptions-item>
              <el-descriptions-item label="预计取件时间">18100000000</el-descriptions-item>
              <el-descriptions-item label="取件完成时间">18100000000</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="top">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item title="费用信息" :name="3" class="collapse">
          <div>
            <el-descriptions class="margin-top" :column="3" :size="size">
              <el-descriptions-item label="运费">18元</el-descriptions-item>
              <el-descriptions-item label="支付方式">未付</el-descriptions-item>
              <el-descriptions-item label="付款状态">未付</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="top">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item title="货品信息" :name="4">
          <div>
            <el-table
              :data="tableData"
              show-summary
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                type="index"
                width="100"
              />
              <el-table-column

                label="货品名称"
                width="250"
              />
              <el-table-column

                label="类型"
                width="250"
              />
              <el-table-column

                label="重量（千克）"
                width="200"
              />
              <el-table-column

                label="体积（立方）"
                width="200"
              />
              <el-table-column
                label="操作"
                width="200"
              >
                <template>
                  <el-button type="text" size="small">编辑</el-button>
                  <el-button>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item></el-collapse>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AddDetailPage',
  data() {
    return {
      size: 'medium',
      tableData: [],
      activeNames: [1, 2, 3, 4]

    }
  }
}
</script>

<style>
.top{
  margin: 20px;
  padding: 20px;

  background-color: #fff;
}
.collapse{
  background-color: #f8faff;
  font-weight:700;
font-size: 30px;
}

  /* .el-header{
    background-color: #f8faff;
    color: #000;
    text-align: left;
    line-height: 2;
    font-weight:700;
  }
  .el-main {
    background-color: #fff;
    color: #000;
    text-align: center;
    line-height: 2;
  } */
</style>
